
class PopHtml {
    constructor(info) {
        this.id = 0
        this.viewer = info.viewer // 弹窗创建的viewer
        this.geometry = info.geometry // 弹窗挂载的位置
        this.ctn = document.createElement('div') // 创建一个div

        // classList为html5的新语法，返回元素类名

        this.ctn.classList.add('bx-popup-ctn')

        this.viewer.container.append(this.ctn) // Cesium.Viewer.container 获取当前viewer的父容器（cesiumContainer）
        // this.ctn.innerHTML = this.createHtml(info.name, info.properties) // 创建Html
        this.ctn.innerHTML = this.createHtml(info.name, info.properties) // 创建Html
        this.render(this.geometry)

        // 添加监听拖动重新渲染位置 viewer.clock.onTick时刻监听
        this.eventListener = this.viewer.clock.onTick.addEventListener(clock => {
            this.render(this.geometry)
        })

        // 关闭按钮绑定关闭事件
        document.getElementById(info.name).onclick = () => {
            this.close()
        }
    }

    // 渲染位置
    render(geometry) {
        const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            this.viewer.scene,
            geometry
        )
        if (position) {
            this.ctn.style.left = position.x - this.ctn.offsetWidth / 2 + 'px'
            this.ctn.style.top = position.y - this.ctn.offsetHeight - 30 + 'px'
        }
    }
    createHtml(header, content) {
        var html =
            `
            <div class="bx-popup-header-ctn" id="${header}">
            header
            <span class="popup-close-button" >❌</span>
            </div>
            <div class="bx-popup-content-ctn" >
                <div class="bx-popup-content" >
                </div>
            </div>` +
            this.createTable(content) +
            `
            <div class="bx-popup-tip-container" >
                <div class="bx-popup-tip" >
                </div>
            </div>
            `
        return html
    }
    createTable(content) {
        let html = '<table class="table-popup">'
        for (const key in content) {
            html += `<tr><td class="title-popup">${key}</td>
           <td class="value-popup">${content[key]}</td></tr>`
        }
        html += '</table>'
        return html
    }
    close() {
        this.ctn.remove()
        this.viewer.clock.onTick.removeEventListener(this.eventListener)
    }
}
export default PopHtml
